<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <link rel="stylesheet" href="../css/main.css">
  <link rel="stylesheet" href="../layui/css/layui.css">
</head>

<body> 
  <div class="index-container">
    <div class="check-login">
      <div class="item">
        <a href="http://www.layui.com/doc/element/button.html" class="layui-btn layui-btn-normal" target="_self">
          <i class="layui-icon layui-icon-username"></i>管理员登录
        </a>
      </div>
      <div class="item">
      <a href="http://www.layui.com/doc/element/button.html" class="layui-btn" target="_self">
        <i class="layui-icon layui-icon-user"></i>用户登录
      </a>
    </div>
    </div>
  </div>

</body>
<style>
  /* 我们先要设置div元素的祖先元素html和body的高度为100%（因为他们默认是为0的），
  并且清除默认样式，即把margin和padding设置为0
  （如果不清除默认样式的话，浏览器就会出现滚动条，聪明的亲，自己想想问什么）。 */
  /*清除边距*/
  * {
    padding: 0;
    margin: 0;
  }

  html,body {
    width: 100%;
    height: 100%;
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-size: cover;
    background-position: center center;
    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    /* 此条属性必须设置否则可能无效 */
    background-attachment: fixed;
    /* 设置背景颜色，背景图加载过程中会显示背景色 */
    background-color: #CCCCCC;
  }
</style>
</html>
<script src="../layui/layui.js"></script>
<script charset="utf-8">
  layui.use(['layer', 'form', 'element'], function () {
    var layer = layui.layer
      , form = layui.form
      , element = layui.element

    //……
    //你的代码都应该写在这里面
  });
  
</script>
